import {FC,Suspense} from 'react';
import {Route,Switch,Redirect} from 'react-router';
import {Routes} from '../utils/index';

interface Props extends Routes{}


const RouterView:FC<Props>=({routes})=>{
   // let redirect=routes.filter(item=>item.to)[0]
   return (
      <Suspense fallback={<div>loading...</div>}>
          <Switch>
             {
                routes.map((item,index)=>{
                    //重定向的
                    if(item.to){
                      return <Redirect key={index} from={item.from} to={item.to}/>
                    }
                    //路由
                    return <Route key={index} path={item.path} render={(propsData)=>{
                        return <item.component {...propsData} routes={item.children || []}/>
                    }}/>
                })
             }   
             {/* {
               routes &&  routes.filter(item=>!item.to).map((v,i)=>{
                  return <Route key={i} path={v.path} render={
                     (props)=>{
                        return <v.component {...props} routes={v.children}></v.component>
                     }
                  }>

                  </Route>
               })
             }
             {
                redirect && <Redirect to={redirect.to || ''} />
             } */}

           </Switch> 
      </Suspense>
   ) 
}


export default RouterView

